<template>
  <view class="station-list-page">
    <!-- 顶部导航栏 -->
    <view class="navbar">
      <view class="title" style="display: flex;">     
		 <u-icon name="map"  size="20" color="#fff" @click="navigateTo('/pages/station/map')"></u-icon>
		 <text style="font-size: 26rpx;color: #fff;margin-left: 15rpx;">杭州市</text>
	  </view>
      <view class="right-actions">
		<text @click="showFilter = true">筛选</text>
      </view>
    </view>
    
    <!-- 搜索栏 -->
    <view class="search-container">
      <view class="search-box">
        <u-icon name="search" size="26" color="#999"></u-icon>
        <input 
          type="text" 
          v-model="searchKeyword" 
          placeholder="搜索驿站名称或地址" 
          @input="handleSearch"
          @focus="searchFocused = true"
          @blur="searchFocused = false"
        />
        <u-icon 
          name="close-circle" 
          size="24" 
          color="#999" 
          @click="clearSearch"
          v-if="searchKeyword"
        ></u-icon>
      </view>
      
      <!-- 热门搜索标签 -->
      <view class="hot-tags" v-if="!searchKeyword && !searchFocused">
        <text class="tag" v-for="(tag, index) in hotSearchTags" :key="index" @click="searchKeyword = tag">{{ tag }}</text>
      </view>
    </view>
    
    <!-- 排序选项 -->
    <view class="sort-bar">
      <view 
        class="sort-item" 
        :class="{active: sortType === 'distance'}"
        @click="sortType = 'distance'"
      >
        <text>距离</text>
        <u-icon 
          name="arrow-down" 
          size="20" 
          color="#999" 
          :class="{active: sortType === 'distance', reverse: sortAscending && sortType === 'distance'}"
        ></u-icon>
      </view>
      <view 
        class="sort-item" 
        :class="{active: sortType === 'rating'}"
        @click="sortType = 'rating'"
      >
        <text>评分</text>
        <u-icon 
          name="arrow-down" 
          size="20" 
          color="#999" 
          :class="{active: sortType === 'rating', reverse: sortAscending && sortType === 'rating'}"
        ></u-icon>
      </view>
      <view 
        class="sort-item" 
        :class="{active: sortType === 'popularity'}"
        @click="sortType = 'popularity'"
      >
        <text>人气</text>
        <u-icon 
          name="arrow-down" 
          size="20" 
          color="#999" 
          :class="{active: sortType === 'popularity', reverse: sortAscending && sortType === 'popularity'}"
        ></u-icon>
      </view>
      <view 
        class="sort-item" 
        :class="{active: sortType === 'price'}"
        @click="sortType = 'price'"
      >
        <text>价格</text>
        <u-icon 
          name="arrow-down" 
          size="20" 
          color="#999" 
          :class="{active: sortType === 'price', reverse: sortAscending && sortType === 'price'}"
        ></u-icon>
      </view>
    </view>
    
    <!-- 筛选条件标签 -->
    <view class="filter-tags" v-if="activeFilters.length > 0">
      <view class="tag" v-for="(filter, index) in activeFilters" :key="index">
        <text>{{ filter.text }}</text>
        <u-icon name="close" size="18" color="#666" @click.stop="removeFilter(filter.type)"></u-icon>
      </view>
      <view class="clear-all" @click="clearAllFilters">清除全部</view>
    </view>
    
    <!-- 驿站列表 -->
    <view class="station-list">
      <view 
        class="station-item" 
        v-for="(station, index) in filteredStations" 
        :key="station.id"
        @click="navigateTo(`/pages/station/detail?id=${station.id}&title=${station.name}`)"
      >
        <!-- 驿站图片 -->
        <view class="station-image">
          <image :src="station.image" mode="aspectFill"></image>
          <view class="distance-tag" v-if="station.distance">
            {{ station.distance }}km
          </view>
          <view class="recommended-tag" v-if="station.recommended">
            推荐
          </view>
        </view>
        
        <!-- 驿站信息 -->
        <view class="station-info">
          <view class="station-header">
            <text class="station-name">{{ station.name }}</text>
            <u-icon 
              name="star" 
              size="24" 
              color="#ffc107" 
              class="star-icon"
            ></u-icon>
            <text class="station-rating">{{ station.rating }}</text>
          </view>
          
          <view class="station-address">
            <u-icon name="map" size="20" color="#999"></u-icon>
            <text>{{ station.address }}</text>
          </view>
          
          <view class="station-courses">
            <view class="course-tag" v-for="(course, cIndex) in station.courses.slice(0, 2)" :key="cIndex">
              {{ course.name }}
            </view>
            <view class="more-courses" v-if="station.courses.length > 2">
              +{{ station.courses.length - 2 }}门课程
            </view>
          </view>
          
          <view class="station-footer">
            <view class="price-info">
              <text class="price">¥{{ station.minPrice }}</text>
              <text class="price-desc">起/人</text>
            </view>
            
            <view class="student-count">
              <text>{{ station.studentCount }}人已报名</text>
            </view>
          </view>
        </view>
        
        <!-- 右侧操作 -->
        <view class="station-actions">
          <button class="contact-btn" @click.stop="contactStation(station)">
            <u-icon name="phone" size="22" color="#fff"></u-icon>
          </button>
          <button 
            class="favorite-btn" 
            @click.stop="toggleFavorite(station)"
            :class="{active: station.favorite}"
          >
            <u-icon 
              :name="station.favorite ? 'heart-fill' : 'heart'" 
              size="24" 
              :color="station.favorite ? '#ff4d4f' : '#999'"
            ></u-icon>
          </button>
        </view>
      </view>
    </view>
    
    <!-- 空状态 -->
    <view class="empty-state" v-if="filteredStations.length === 0 && !loading">
      <u-icon name="search" size="80" color="#ddd"></u-icon>
      <text class="empty-text">未找到相关飞行驿站</text>
      <button class="reset-btn" @click="resetFilters">重置筛选条件</button>
    </view>
    
    <!-- 加载更多 -->
    <view class="load-more" v-if="filteredStations.length > 0 && !loading && hasMore">
      <u-loading-icon size="28" color="#4facfe"></u-loading-icon>
      <text class="load-text">加载更多</text>
    </view>
    
    <!-- 筛选弹窗 -->
    <u-popup 
      :show="showFilter" 
      mode="bottom" 
      :height="700"
      closeable
      @close="showFilter = false"
    >
      <view class="filter-popup">
        <view class="filter-title">筛选条件</view>
        
        <!-- 地区筛选 -->
        <view class="filter-section">
          <view class="filter-section-title">所在区域</view>
          <view class="filter-options">
            <view 
              class="filter-option" 
              v-for="(area, index) in areaOptions" 
              :key="index"
              :class="{selected: selectedArea === area.value}"
              @click="selectedArea = area.value"
            >
              {{ area.label }}
            </view>
          </view>
        </view>
        
        <!-- 课程类型筛选 -->
        <view class="filter-section">
          <view class="filter-section-title">课程类型</view>
          <view class="filter-options">
            <view 
              class="filter-option" 
              v-for="(course, index) in courseTypeOptions" 
              :key="index"
              :class="{selected: selectedCourseTypes.includes(course.value)}"
              @click="toggleCourseType(course.value)"
            >
              {{ course.label }}
            </view>
          </view>
        </view>
        
        <!-- 价格筛选 -->
        <view class="filter-section">
          <view class="filter-section-title">价格范围</view>
          <view class="filter-options">
            <view 
              class="filter-option" 
              v-for="(price, index) in priceRangeOptions" 
              :key="index"
              :class="{selected: selectedPriceRange === price.value}"
              @click="selectedPriceRange = price.value"
            >
              {{ price.label }}
            </view>
          </view>
        </view>
        
        <!-- 评分筛选 -->
        <view class="filter-section">
          <view class="filter-section-title">最低评分</view>
          <view class="filter-options">
            <view 
              class="filter-option" 
              v-for="(rating, index) in ratingOptions" 
              :key="index"
              :class="{selected: selectedMinRating === rating.value}"
              @click="selectedMinRating = rating.value"
            >
              {{ rating.label }}
            </view>
          </view>
        </view>
        
        <!-- 筛选按钮 -->
        <view class="filter-buttons">
          <button class="reset-filter" @click="resetFilterOptions">重置</button>
          <button class="confirm-filter" @click="applyFilters">确认筛选</button>
        </view>
      </view>
    </u-popup>
    
    <!-- 回到顶部按钮 -->
    <u-back-top 
      :scroll-top="scrollTop" 
      :show="scrollTop > 500"
      :bottom="120"
      :right="30"
      :icon-style="{color: '#4facfe', backgroundColor: '#fff', border: '1px solid #eee'}"
    ></u-back-top>
	<helang-tabBar></helang-tabBar>
  </view>
</template>

<script>
import helangTabBar from '@/components/helang-tabBar/helang-tabBar.vue'
export default {
  components:{
	  helangTabBar
  },
  data() {
    return {
      // 页面滚动位置
      scrollTop: 0,
      
      // 搜索相关
      searchKeyword: '',
      searchFocused: false,
      hotSearchTags: ['AOPA考证', '大疆培训', '航拍课程', '电力巡检', '农业植保'],
      
      // 排序相关
      sortType: 'distance', // distance, rating, popularity, price
      sortAscending: false, // false表示降序，true表示升序
      
      // 筛选相关
      showFilter: false,
      selectedArea: '',
      selectedCourseTypes: [],
      selectedPriceRange: '',
      selectedMinRating: '',
      activeFilters: [],
      
      // 筛选选项
      areaOptions: [
        { label: '全部区域', value: '' },
        { label: '东城区', value: 'dongcheng' },
        { label: '西城区', value: 'xicheng' },
        { label: '朝阳区', value: 'chaoyang' },
        { label: '海淀区', value: 'haidian' },
        { label: '丰台区', value: 'fengtai' },
        { label: '石景山', value: 'shijingshan' }
      ],
      
      courseTypeOptions: [
        { label: 'AOPA考证', value: 'aopa' },
        { label: '驾驶员执照', value: 'driver' },
        { label: '航拍技能', value: 'aerial' },
        { label: '农业植保', value: 'agriculture' },
        { label: '电力巡检', value: 'power' },
        { label: '影视拍摄', value: 'film' }
      ],
      
      priceRangeOptions: [
        { label: '全部价格', value: '' },
        { label: '1000元以下', value: '0-1000' },
        { label: '1000-3000元', value: '1000-3000' },
        { label: '3000-5000元', value: '3000-5000' },
        { label: '5000元以上', value: '5000+' }
      ],
      
      ratingOptions: [
        { label: '全部评分', value: '' },
        { label: '4.0分以上', value: '4.0' },
        { label: '4.5分以上', value: '4.5' },
        { label: '5.0分满分', value: '5.0' }
      ],
      
      // 驿站数据
      stations: [],
      filteredStations: [],
      loading: false,
      hasMore: true,
      page: 1,
      pageSize: 10
    };
  },
  
  onLoad() {
    // 初始化数据
    this.generateMockData();
    this.filteredStations = [...this.stations];
    this.updateActiveFilters();
  },
  
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
    
    // 实现滚动加载更多
    if (this.scrollTop + uni.getSystemInfoSync().windowHeight >= document.documentElement.scrollHeight - 300 
        && !this.loading && this.hasMore) {
      this.loadMoreData();
    }
  },
  
  computed: {
    // 根据排序类型和方向对驿站进行排序
    sortedStations() {
      return [...this.filteredStations].sort((a, b) => {
        switch (this.sortType) {
          case 'distance':
            return this.sortAscending ? a.distance - b.distance : b.distance - a.distance;
          case 'rating':
            return this.sortAscending ? a.rating - b.rating : b.rating - a.rating;
          case 'popularity':
            return this.sortAscending ? a.studentCount - b.studentCount : b.studentCount - a.studentCount;
          case 'price':
            return this.sortAscending ? a.minPrice - b.minPrice : b.minPrice - a.minPrice;
          default:
            return 0;
        }
      });
    }
  },
  
  methods: {
    // 生成模拟数据
    generateMockData() {
      const courseTypes = [
        { name: 'AOPA考证', value: 'aopa' },
        { name: '驾驶员执照', value: 'driver' },
        { name: '航拍技能', value: 'aerial' },
        { name: '农业植保', value: 'agriculture' },
        { name: '电力巡检', value: 'power' },
        { name: '影视拍摄', value: 'film' }
      ];
      
      const areas = ['东城区', '西城区', '朝阳区', '海淀区', '丰台区', '石景山'];
      const areaValues = ['dongcheng', 'xicheng', 'chaoyang', 'haidian', 'fengtai', 'shijingshan'];
      
      this.stations = [];
      
      for (let i = 1; i <= 25; i++) {
        // 随机选择2-4种课程
        const courseCount = Math.floor(Math.random() * 3) + 2;
        const selectedCourses = [];
        const courseValueSet = new Set();
        
        while (selectedCourses.length < courseCount) {
          const randomIndex = Math.floor(Math.random() * courseTypes.length);
          const course = courseTypes[randomIndex];
          
          if (!courseValueSet.has(course.value)) {
            courseValueSet.add(course.value);
            selectedCourses.push(course);
          }
        }
        
        // 随机区域
        const areaIndex = Math.floor(Math.random() * areas.length);
        
        // 随机价格
        const minPrice = Math.floor(Math.random() * 9) * 1000 + 1000;
        
        // 随机评分
        const rating = (4 + Math.random() * 1).toFixed(1);
        
        // 随机距离
        const distance = (Math.random() * 15 + 0.5).toFixed(1);
        
        // 随机学生数量
        const studentCount = Math.floor(Math.random() * 950) + 50;
        
        // 随机是否推荐
        const recommended = Math.random() > 0.7;
        
        this.stations.push({
          id: i,
          name: `蓝天无人机培训学校${i}`,
          image: `https://picsum.photos/id/${150 + i}/300/200`,
          address: `${areas[areaIndex]}${i}号无人机产业园${i}号楼`,
          area: areaValues[areaIndex],
          rating: parseFloat(rating),
          distance: parseFloat(distance),
          courses: selectedCourses,
          courseValues: selectedCourses.map(c => c.value),
          minPrice: minPrice,
          studentCount: studentCount,
          phone: `13${Math.floor(Math.random() * 100000000)}`,
          recommended: recommended,
          favorite: false
        });
      }
    },
    
    // 处理搜索
    handleSearch() {
      this.applyFilters();
    },
    
    // 清除搜索
    clearSearch() {
      this.searchKeyword = '';
      this.applyFilters();
    },
    
    // 切换排序方式
    toggleSort(type) {
      if (this.sortType === type) {
        this.sortAscending = !this.sortAscending;
      } else {
        this.sortType = type;
        this.sortAscending = false; // 默认降序
      }
    },
    
    // 切换课程类型筛选
    toggleCourseType(value) {
      const index = this.selectedCourseTypes.indexOf(value);
      if (index > -1) {
        this.selectedCourseTypes.splice(index, 1);
      } else {
        this.selectedCourseTypes.push(value);
      }
    },
    
    // 应用筛选条件
    applyFilters() {
      this.loading = true;
      
      // 模拟网络请求延迟
      setTimeout(() => {
        let result = [...this.stations];
        
        // 搜索筛选
        if (this.searchKeyword) {
          const keyword = this.searchKeyword.toLowerCase();
          result = result.filter(station => 
            station.name.toLowerCase().includes(keyword) || 
            station.address.toLowerCase().includes(keyword)
          );
        }
        
        // 地区筛选
        if (this.selectedArea) {
          result = result.filter(station => station.area === this.selectedArea);
        }
        
        // 课程类型筛选
        if (this.selectedCourseTypes.length > 0) {
          result = result.filter(station => 
            this.selectedCourseTypes.some(type => station.courseValues.includes(type))
          );
        }
        
        // 价格范围筛选
        if (this.selectedPriceRange) {
          const [min, max] = this.selectedPriceRange.split('-');
          if (max === '+') {
            result = result.filter(station => station.minPrice >= parseInt(min));
          } else if (min && max) {
            result = result.filter(station => 
              station.minPrice >= parseInt(min) && station.minPrice <= parseInt(max)
            );
          }
        }
        
        // 评分筛选
        if (this.selectedMinRating) {
          result = result.filter(station => station.rating >= parseFloat(this.selectedMinRating));
        }
        
        this.filteredStations = result;
        this.page = 1;
        this.hasMore = this.filteredStations.length > this.pageSize;
        this.updateActiveFilters();
        this.showFilter = false;
        this.loading = false;
      }, 500);
    },
    
    // 更新活跃的筛选条件标签
    updateActiveFilters() {
      this.activeFilters = [];
      
      // 地区筛选标签
      if (this.selectedArea) {
        const area = this.areaOptions.find(a => a.value === this.selectedArea);
        if (area) {
          this.activeFilters.push({
            text: area.label,
            type: 'area'
          });
        }
      }
      
      // 课程类型筛选标签
      this.selectedCourseTypes.forEach(type => {
        const course = this.courseTypeOptions.find(c => c.value === type);
        if (course) {
          this.activeFilters.push({
            text: course.label,
            type: 'course'
          });
        }
      });
      
      // 价格范围筛选标签
      if (this.selectedPriceRange) {
        const price = this.priceRangeOptions.find(p => p.value === this.selectedPriceRange);
        if (price) {
          this.activeFilters.push({
            text: price.label,
            type: 'price'
          });
        }
      }
      
      // 评分筛选标签
      if (this.selectedMinRating) {
        const rating = this.ratingOptions.find(r => r.value === this.selectedMinRating);
        if (rating) {
          this.activeFilters.push({
            text: rating.label,
            type: 'rating'
          });
        }
      }
    },
    
    // 移除单个筛选条件
    removeFilter(type) {
      switch (type) {
        case 'area':
          this.selectedArea = '';
          break;
        case 'course':
          this.selectedCourseTypes = [];
          break;
        case 'price':
          this.selectedPriceRange = '';
          break;
        case 'rating':
          this.selectedMinRating = '';
          break;
      }
      this.applyFilters();
    },
    
    // 清除所有筛选条件
    clearAllFilters() {
      this.selectedArea = '';
      this.selectedCourseTypes = [];
      this.selectedPriceRange = '';
      this.selectedMinRating = '';
      this.searchKeyword = '';
      this.applyFilters();
    },
    
    // 重置筛选选项
    resetFilterOptions() {
      this.selectedArea = '';
      this.selectedCourseTypes = [];
      this.selectedPriceRange = '';
      this.selectedMinRating = '';
    },
    
    // 重置所有筛选条件
    resetFilters() {
      this.clearAllFilters();
    },
    
    // 加载更多数据
    loadMoreData() {
      this.loading = true;
      
      // 模拟加载更多
      setTimeout(() => {
        this.page++;
        this.loading = false;
        
        // 实际应用中这里应该是请求下一页数据
        // 这里只是简单判断是否还有更多数据
        this.hasMore = this.page * this.pageSize < this.filteredStations.length;
      }, 1000);
    },
    
    // 联系驿站
    contactStation(station) {
      uni.makePhoneCall({
        phoneNumber: station.phone,
        fail: (err) => {
          console.log('拨打电话失败', err);
        }
      });
    },
    
    // 切换收藏状态
    toggleFavorite(station) {
      station.favorite = !station.favorite;
      uni.showToast({
        title: station.favorite ? '已收藏' : '已取消收藏',
        icon: 'none',
        duration: 1500
      });
    },
    
    // 导航到其他页面
    navigateTo(url) {
      uni.navigateTo({
        url: url
      });
    }
  },
  
  watch: {
    // 监听排序类型变化
    sortType() {
      // 当切换排序类型时，默认使用降序
      this.sortAscending = false;
    }
  }
};
</script>

<style lang="scss" scoped>
.station-list-page {
  background-color: #f5f7fa;
  min-height: 100vh;
  padding-bottom: 30rpx;
}

// 导航栏样式
.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 100rpx;
  padding: 0 30rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  
  .title {
  }
  
  .right-actions {
    display: flex;
    align-items: center;
    
    .filter-icon {
      margin-left: 30rpx;
    }
  }
}

// 搜索栏样式
.search-container {
  padding: 20rpx 30rpx;
  background-color: #f5f7fa;
  
  .search-box {
    display: flex;
    align-items: center;
    background-color: #fff;
    border-radius: 60rpx;
    padding: 0 25rpx;
    height: 70rpx;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
    
    input {
      flex: 1;
      height: 100%;
      font-size: 28rpx;
      padding: 0 15rpx;
      color: #333;
      background: transparent;
      border: none;
      outline: none;
    }
    
    input::placeholder {
      color: #999;
    }
  }
  
  .hot-tags {
    display: flex;
    flex-wrap: wrap;
    margin-top: 20rpx;
    gap: 15rpx;
    
    .tag {
      font-size: 26rpx;
      color: #666;
      background-color: #fff;
      padding: 8rpx 20rpx;
      border-radius: 20rpx;
      box-shadow: 0 2rpx 5rpx rgba(0, 0, 0, 0.03);
    }
  }
}

// 排序栏样式
.sort-bar {
  display: flex;
  background-color: #fff;
  height: 80rpx;
  border-bottom: 1rpx solid #eee;
  
  .sort-item {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    color: #666;
    position: relative;
    
    text {
      margin-right: 8rpx;
    }
    
    &.active {
      color: #4facfe;
    }
    
    .u-icon {
      transition: transform 0.3s ease;
      
      &.active {
        color: #4facfe;
      }
      
      &.reverse {
        transform: rotate(180deg);
      }
    }
  }
}

// 筛选标签样式
.filter-tags {
  display: flex;
  flex-wrap: wrap;
  padding: 15rpx 30rpx;
  gap: 15rpx;
  background-color: #fff;
  border-bottom: 1rpx solid #eee;
  
  .tag {
    display: flex;
    align-items: center;
    background-color: #e6f7ff;
    color: #4facfe;
    font-size: 24rpx;
    padding: 5rpx 15rpx;
    border-radius: 20rpx;
    
    .u-icon {
      margin-left: 8rpx;
    }
  }
  
  .clear-all {
    font-size: 24rpx;
    color: #999;
    align-self: center;
    margin-left: auto;
  }
}

// 驿站列表样式
.station-list {
  padding: 20rpx 30rpx;
  
  .station-item {
    display: flex;
    background-color: #fff;
    border-radius: 16rpx;
    overflow: hidden;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
    transition: transform 0.2s ease;
    
    &:active {
      transform: scale(0.99);
    }
    
    .station-image {
      width: 220rpx;
      height: 220rpx;
      position: relative;
      
      image {
        width: 100%;
        height: 100%;
      }
      
      .distance-tag {
        position: absolute;
        top: 10rpx;
        left: 10rpx;
        background-color: rgba(0, 0, 0, 0.5);
        color: #fff;
        font-size: 22rpx;
        padding: 3rpx 10rpx;
        border-radius: 15rpx;
      }
      
      .recommended-tag {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        background-color: #ff4d4f;
        color: #fff;
        font-size: 22rpx;
        padding: 3rpx 10rpx;
        border-radius: 15rpx;
      }
    }
    
    .station-info {
      flex: 1;
      padding: 20rpx;
      display: flex;
      flex-direction: column;
      
      .station-header {
        display: flex;
        align-items: center;
        margin-bottom: 10rpx;
        
        .station-name {
          font-size: 30rpx;
          font-weight: 500;
          color: #333;
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
        }
        
        .star-icon {
          margin-right: 5rpx;
        }
        
        .station-rating {
          font-size: 26rpx;
          color: #ff9800;
          font-weight: 500;
        }
      }
      
      .station-address {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #999;
        margin-bottom: 15rpx;
        line-height: 1.3;
        flex-shrink: 0;
        
        text {
          flex: 1;
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          margin-left: 5rpx;
        }
      }
      
      .station-courses {
        display: flex;
        flex-wrap: wrap;
        gap: 10rpx;
        margin-bottom: 15rpx;
        flex-grow: 1;
        
        .course-tag {
          background-color: #f5f7fa;
          color: #666;
          font-size: 22rpx;
          padding: 3rpx 12rpx;
          border-radius: 15rpx;
        }
        
        .more-courses {
          font-size: 22rpx;
          color: #999;
          align-self: center;
        }
      }
      
      .station-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        
        .price-info {
          .price {
            font-size: 28rpx;
            color: #ff4d4f;
            font-weight: bold;
          }
          
          .price-desc {
            font-size: 22rpx;
            color: #999;
            margin-left: 5rpx;
          }
        }
        
        .student-count {
          display: flex;
          align-items: center;
          font-size: 22rpx;
          color: #999;
          
          .u-icon {
            margin-right: 5rpx;
          }
        }
      }
    }
    
    .station-actions {
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 0 20rpx;
      
      .contact-btn {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        background-color: #4facfe;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-bottom: 20rpx;
        border: none;
      }
      
      .favorite-btn {
        width: 60rpx;
        height: 60rpx;
        border-radius: 50%;
        background-color: #f5f7fa;
        display: flex;
        align-items: center;
        justify-content: center;
        border: none;
        
        &.active {
          background-color: #fff0f0;
        }
      }
    }
  }
}

// 空状态样式
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  
  .empty-text {
    font-size: 28rpx;
    color: #999;
    margin: 30rpx 0;
  }
  
  .reset-btn {
    background-color: #4facfe;
    color: #fff;
    border: none;
    border-radius: 30rpx;
    padding: 12rpx 40rpx;
    font-size: 26rpx;
  }
}

// 加载更多样式
.load-more {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 30rpx 0;
  
  .load-text {
    font-size: 26rpx;
    color: #999;
    margin-left: 15rpx;
  }
}

// 筛选弹窗样式
.filter-popup {
  padding: 30rpx;
  height: 100%;
  box-sizing: border-box;
  
  .filter-title {
    font-size: 34rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 30rpx;
    text-align: center;
  }
  
  .filter-section {
    margin-bottom: 30rpx;
    
    .filter-section-title {
      font-size: 28rpx;
      font-weight: 500;
      color: #333;
      margin-bottom: 20rpx;
    }
    
    .filter-options {
      display: flex;
      flex-wrap: wrap;
      gap: 15rpx;
    }
    
    .filter-option {
      padding: 12rpx 25rpx;
      background-color: #f5f7fa;
      border-radius: 60rpx;
      font-size: 26rpx;
      color: #666;
      
      &.selected {
        background-color: #4facfe;
        color: #fff;
      }
    }
  }
  
  .filter-buttons {
    display: flex;
    gap: 20rpx;
    margin-top: 40rpx;
    
    .reset-filter, .confirm-filter {
      flex: 1;
      height: 80rpx;
      border-radius: 40rpx;
      font-size: 30rpx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    
    .reset-filter {
      background-color: #f5f7fa;
      color: #666;
      border: none;
    }
    
    .confirm-filter {
      background-color: #4facfe;
      color: #fff;
      border: none;
    }
  }
}
</style>
